<template>
	<div class="white-box">
		<div class="table-mb">
			<el-button type="primary" @click="handleAdd">添加管理员</el-button>
		</div>

		<div class="task-one">
		    <div class="task-one__item">
		        <span class="task-one__label">管理员名称：</span>
		        <el-input placeholder="请输入管理员名称搜索" v-model="search_text" @keyup.enter.native="handleSearch" clearable> </el-input>
		    </div>
		    <div class="task-one__btn clearfix">
		        <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
		    </div>
		</div>

		<el-table class="table-mb" v-loading="loading" :data="arr_data" :header-cell-style="{ background: '#F5F7FA' }"
			element-loading-background="rgba(255, 255, 255, 0.6)" @selection-change="handleAllSelected">
			<!-- <el-table-column type="selection" width="55" /> -->
			<el-table-column prop="name" label="姓名"> </el-table-column>
			<el-table-column prop="email" label="账号"> </el-table-column>
			<el-table-column prop="user_role" label="角色名称">
				<template #default="{ row }">
					{{row.user_role[0].role.role}}
				</template>
			</el-table-column>
			<el-table-column prop="created_at" label="创建时间"> </el-table-column>
			<el-table-column prop="updated_at" label="更新时间"> </el-table-column>
			<el-table-column label="操作" width="170" fixed="right">
				<template #default="{ row }">
					<el-button class="theme-btn" link type="primary" @click="handleEdit(row)">编辑</el-button>
					<el-popconfirm v-if="row.is_delete==1" :persistent="false" title="确定停用吗？" confirm-button-text="确定" cancel-button-text="取消"
						@confirm="handleDelete(row)">
						<template #reference>
							<el-button class="theme-btn" link type="primary" style="margin-left: 14px">停用</el-button>
						</template>
					</el-popconfirm>
					<el-popconfirm v-if="row.is_delete==2" :persistent="false" title="确定启用吗？" confirm-button-text="确定" cancel-button-text="取消"
						@confirm="handleDelete(row)">
						<template #reference>
							<el-button class="theme-btn" link type="primary" style="margin-left: 14px">启用</el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination background v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="pageSizeNum"
			:total="totalNums" layout="total, sizes, prev, pager, next, jumper">
		</el-pagination>

		
		
		<el-dialog v-model="dialogClass" title="设置菜单" width="560px" :append-to-body="true" :destroy-on-close="true"
			:close-on-click-modal="false" @close="closeAddClass">
			<el-form ref="ruleClassRef" :model="ruleClassForm" :rules="ruleCheckClass" label-width="120px">
				
				<el-form-item label="姓名" prop="name" required>
					<el-input v-model.trim="ruleClassForm.name" clearable placeholder="请输入姓名" />
				</el-form-item>
				<el-form-item label="账号" prop="email" required>
					<el-input v-model.trim="ruleClassForm.email" clearable placeholder="请输入账号" />
				</el-form-item>
				<el-form-item label="密码" prop="password" required>
					<el-input v-model.trim="ruleClassForm.password" show-password clearable placeholder="请输入密码" />
				</el-form-item>
				<el-form-item label="角色" prop="role_id" required>
					<el-select v-model="ruleClassForm.role_id" placeholder="请选择角色">
						<el-option :label="item.role" :value="item.id" v-for="(item, index) in roleList"
							:key="index" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<div class="flexs" style="margin-top: 30px">
						<el-button type="primary" :loading="form_loading" @click="submitClassForm(ruleClassRef)">
							确认
						</el-button>
						<el-button @click="resetClassForm(ruleClassRef)">重置</el-button>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
		
		<go-back />
	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref,
		reactive,
		onMounted,
		watch
	} from "vue"
	import OneLoad from "@mixins/one-load"
	import {
		useRouter
	} from "vue-router"
	import {
		Search
	} from "@element-plus/icons-vue"
	import GoBack from "@components/GoBack.vue"

	const router = useRouter()
	const {
		proxy
	} = getCurrentInstance()

	onMounted(() => {
		getList()
		getRole()
	})
	/**
	 * minxin列表加载
	 */
	const {
		page,
		pageSizeNum,
		pageSize,
		loading,
		arr_data,
		totalNums,
		search_text,
		search_btn,
		pubParams,
		pubRefreshParams,
		getdata
	} = OneLoad()
	
	/**
	 * 添加/编辑
	 * @property {Boolean} dialogClass 添加/编辑弹窗状态
	 * @property {Boolean} form_loading 提交按钮状态
	 * @property {Number} classType 弹窗类型，1是添加，2是编辑
	 * @property {Array} ruleClassRef 表单规则
	 * @property {Object} ruleClassForm  表单字段
	 * @property {Object} ruleCheckClass  表单提示
	 * @property {Function} submitClassForm 提交表单
	 * @property {Function} addClass 添加分类
	 * @property {Function} closeAddClass 关闭弹窗
	 */
	const dialogClass = ref(false)
	const form_loading = ref(false)
	const classType = ref(1)
	const ruleClassRef = ref(null)
	const ruleClassForm = reactive({
		name:"",
		email:"",
		password:"",
		role_id:"",
	})
	const ruleCheckClass = reactive({
		name: [{
			required: true,
			message: "请输入姓名",
			trigger: "blur"
		}],
		email: [{
			required: true,
			message: "请输入账号",
			trigger: "blur"
		}],
		password: [{
			required: true,
			message: "请输入密码",
			trigger: "blur"
		}],
		role_id: [{
			required: true,
			message: "请选择角色",
			trigger: "change"
		}],
	})

	// 切换每页显示条数
	watch(pageSize, (val) => {
		page.value = 1
		pubParams(getList)
	})
	// 跳转第几页
	watch(page, (val) => {
		pubParams(getList)
	})
	const handleSearch = () => {
	    search_btn.value = true
	    pubRefreshParams(getList)
	}
	function getList() {
		let params = {
			page: page.value,
			limit: pageSize.value,
			name: search_text.value,
		}
		getdata("admin/users/list", params)
	}
	//获取角色
	const roleList=ref([])
	function getRole(){
		proxy.$axios.get("admin/role/list?limit=100").then(res=>{
			if (res.data.code == 0) {
				roleList.value=res.data.data.data
			} else {
				proxy.$message({
					message: res.data.msg,
					type: "error"
				})
			}
		})
	}
	
	const handleAdd=()=>{
		dialogClass.value=true
		classType.value = 1
	}
	const handleEdit=(row)=>{
		dialogClass.value=true
		classType.value = 2
		setTimeout(()=>{
			ruleClassForm.name=row.name
			ruleClassForm.email=row.email
			ruleClassForm.password=row.password
			ruleClassForm.id=row.id
			ruleClassForm.role_id=row.user_role[0].role_id
		},50)
	}
	const resetClassForm = (formEl) => {
	    if (!formEl) return
	    formEl.resetFields()
	}
	const closeAddClass = () => {
	    dialogClass.value = false
	    resetClassForm(ruleClassRef.value)
	}
	const submitClassForm = (formEl) => {
		if (!formEl) return
		formEl.validate((valid, fields) => {
			if (valid) {
				form_loading.value = true
				// let names = proxy.$util.replaceStr(ruleClassForm.name)
				let data = ruleClassForm
				
	
				let url = classType.value == 1 ? "admin/users/store" : "admin/users/save"
				proxy.$axios
					.post(url, data)
					.then((res) => {
						form_loading.value = false
						if (res.data.code == 0) {
							dialogClass.value = false
							proxy.$message({
								message: `${classType.value == 1 ? "添加成功！" : "编辑成功！"}`,
								type: "success"
							})
							pubParams(getList)
						} else {
							proxy.$message({
								message: res.data.msg,
								type: "error"
							})
						}
					})
					.catch((err) => {
						form_loading.value = false
					})
			}
		})
	}
	function handleDelete(params) {
		proxy.$axios
			.get("admin/users/del", {
				params: {
					user_id: params.id,
				}
			})
			.then((res) => {
				if (res.data.code == 0) {
					proxy.$message({
						message: "操作成功",
						type: "success"
					})
					pubParams(getList)
				} else {
					proxy.$message({
						message: res.data.msg,
						type: "error"
					})
				}
			})
			.catch((err) => {})
	}
</script>

<style lang="less" scoped>

</style>